/**
 * @author:bjzhang
 */
'use strict';

import React,{ Component } from 'react';
import {
    StyleSheet,
    View,
    StatusBar,
    Text,
    Image,
    TouchableHighlight,
    findNodeHandle,
    Platform,
    InteractionManager
} from 'react-native';
import PHead from '../module/header';
import PFooter from '../module/footer';
import HuntChest from './hunt-chest';
import renderIf from '../module/renderIf';
import NewChest from  '../chest/new-chest';
import FindChest from '../chest/find-chest';
import FindFun from '../module/find-chest-fun';
import Toast from 'react-native-root-toast';
import { common } from '../module/common';
import {withNavigation} from "react-navigation";
import Login from "./login";
export default class Chest extends Component{
    constructor(){
        super();
        this.state = {
            viewRef:null,
            viewNew:false,
            avatarSource:null,
            packet:false,
            bagInfo:null,
        }
    }
    componentDidMount(){
        this.getBag();
    }
    getBag(){
        let that = this;
        this.watchID = navigator.geolocation.watchPosition((position) => {
            that.location = { longitude:position.coords.longitude,latitude:position.coords.latitude,address:''};
        },error => {
            that.location = { longitude:106.572, latitude:29.6323  };
            Toast.show('获取您当前的位置失败',{
                duration: Toast.durations.LONG,
                position: Toast.positions.BOTTOM,
                onHidden:()=>{
                    that.props.navigation.goBack();
                }}
            );
        });
        that.timer = setInterval(function(){
            FindFun.finding(that);
        },5000);
    }
    componentWillUnmount(){
        clearInterval(this.timer);
        navigator.geolocation.clearWatch(this.watchID);
    }
    moreEvent(){
        // withNavigation(FindChest);
        // common.routeTest();
        // this.props.navigation.navigate('MineChests');
    }
    newChest(){
        clearInterval(this.timer);
        navigator.geolocation.clearWatch(this.watchID);
        this.setState({viewNew:true});
    }
    closeNew(){
        this.setState({viewNew:false});
        this.getBag();
    }
    closeFind(){
        this.setState({ packet:false });
        this.getBag();
    }
    render() {
        return (
            <View style={{flex:1}}>
                <View style={styles.container}>
                    <PHead onRightEvent={this.moreEvent.bind(this)} rightText='更多' title='LULU'/>
                    <View style={{flex:1}}>
                        <HuntChest navigate={ this.props.navigation.navigate }/>
                    </View>
                    <PFooter onMessage={ ()=> this.props.navigation.navigate('MineConversations') }
                             onMine={ ()=> this.props.navigation.navigate('MineChests') }
                             onNewChest={this.newChest.bind(this)} />
                </View>
                {renderIf(this.state.viewNew)(
                    <View style={[styles.blurView,styles.container]}>
                        <NewChest onNavigation={this.props.navigation} onClosed={this.closeNew.bind(this)}/>
                    </View>
                )}
                {renderIf(this.state.packet)(
                    <View style={[styles.blurView,styles.container]}>
                        <FindChest onNavigation={this.props.navigation} BagInfo={this.state.bagInfo} onClosed={this.closeFind.bind(this)}/>
                    </View>
                )}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        flexDirection:'column',
        justifyContent:'space-between',
    },
    blurView: {
        position: "absolute",
        left: 0,
        top: 0,
        bottom: 0,
        right: 0
    },
    chestTip:{
        fontSize:24,
        color:'#fff',
        marginLeft:40,
        marginTop:65,
    },
    addressTx:{
        fontSize:14,
        color:'#B0B2C2',
        marginLeft:40,
    },
    btnWrap:{
        marginLeft:50,
        marginRight:49,
        flex:1,
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'flex-end',
    },
    btnText:{
        marginTop:10,
        color:'#fff'
    },
    touchCenter:{
        justifyContent:'center',
        alignItems:'center',
    },
    closeWrap:{
        alignItems:'center',
        marginTop:30,
        marginBottom:30,
    },
    popupLayer:{
        width:320,
        height:356,
        backgroundColor:'#fff',
        borderRadius:15,
        top:142,
        alignItems:'center',
    },
    headerImg:{
        width:54,
        height:54,
        borderRadius:54,
        overlayColor:'transparent',
    },
    headerBox:{
        top:115,
        left:160,
        position:'absolute',
    },
    userSexIco:{
        right:0,
        top:0,
        position:'absolute',
    },
    fontNickName:{
        fontSize:21,
        color:'#5F6484',
        marginTop:47,
        textAlign:'center',
    },
    addressWrap:{
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
    },
    mediaBackgroundImage:{
        width:100,
        height:80,
    },
    mediaTypeTx:{
        marginTop:10,
        fontSize:12,
        color:'#5F6484',
        textAlign:'center'
    },
    mediaWrap:{
        marginTop:45,
    },
    openButton:{
        width:300,
        height:50,
        backgroundColor:'#43CBFE',
        justifyContent:'center',
        alignItems:'center',
        borderRadius:4,
    },
    openButtonWrap:{
        paddingLeft:10,
        paddingRight:10,
        marginTop:47,
    },
    openButtonTx:{
        color:'#fff',
        fontSize:17,
    },
});